<template>
  <div class="floor-container">
    <div class="floor-left">
      <ul class="floor-left-content">
        <template v-for="(item, index) in cityList">
          <!-- { A: [] }  -->
          <h2 class="alpha-item" :key="index">{{index}}</h2>
          <template v-for="(v) in item">
            <li>{{v.name}}</li>
          </template>
        </template>
      </ul>
    </div>
    <div class="floor-right">
      <template v-for="(item, index) in cityList">
        <span>{{index}}</span>
      </template>
    </div>
  </div>
</template>

<script>
//  <template v-for="item in leftArr">
//   <template v-for="(val, i) in item">
//     <li>{{val.name}}</li>
//   </h1>
// </template>
/**
 *
 * ABC
 * ABC的offsetTop 存在一个数组中，
 * 点击右边字母的时候，让滚动条滚动到对应的offsetTop
 * : scrollTop = offsetTop
 * 2. floor-left 监听滚动条事件
 *  floorLeft.addEventListener('scroll', update)
 *  floorLeft.removeEventListener
 *  update(() => {
 *  })
 *  getBoundingClentRact().top <
 *  找到下标
 */
import "@/mock";
export default {
  data() {
    return {
      cityList: [],
      alpha: [],
      leftArr: [],
    };
  },
  mounted() {
    // window.queueMicrotask(() => {
    //   console.log("hello world----world");
    //   // this.setState({ showMask: true });
    // });
    this.getCityData();
  },
  methods: {
    async getCityData() {
      let city = await this.$http.get("/api/list");
      this.cityList = city.data.city;
      console.log("this.cityList:----> ", this.cityList);
      // this.alpha = Object.keys(this.cityList);
      // this.leftArr = Object.values(this.cityList);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/_common.scss";
.floor-container {
  @include wh(100%, 100%);
  display: flex;
  flex-direction: column;
  .floor-left {
    overflow: auto;
  }
}
.floor-right {
  width: 25px;
  position: fixed;
  right: 10px;
  top: 20px;

  span {
    width: 20px;
    height: 20px;
    display: block;
    background: lightcoral;
    margin: 3px;
    @include flex_center;
    color: beige;
  }
}
</style>